 <section id="container" >
      <!--header start-->
      <header class="header white-bg">
            <div class="sidebar-toggle-box">
                <div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
            </div>
            <!--logo start-->
            <a href="#" class="logo">Flat<span>lab</span></a>
            <!--logo end-->
              <div class="top-nav "> 
                <!--search & user info start-->
                  <ul class="nav pull-right top-menu"> 
                    <li>
                        <input type="text" class="form-control fa fa-search" placeholder="Search">
                    </li> 
                     <!-- user login dropdown start -->
                     <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="assets/imgs/avatar-mini4.jpg">
                            <span class="username">Jhon Doue</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"><i class="fa fa-suitcase"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a href="#"><i class="fa fa-bell"></i> Notification</a></li>
                            <li><a href="#"><i class="fa fa-key"></i> Log Out</a></li>
                        </ul>
                    </li> 
                    <!-- user login dropdown end -->
                 </ul> 
                <!--search & user info end-->
             </div>  
        </header>
      <!--header end-->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
                  <li>
                      <a class="active" href="#">
                          <i class="fa fa-home"></i>
                          <span>Home</span>
                      </a>
                  </li>

                   <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-laptop"></i>
                          <span>User Profile</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="#">Settings</a></li>
                          <li><a  href="#">Modify</a></li>
                      </ul>
                  </li> 
                  <li class="sub-menu">
                      <a routerLink="home">
                          <i class="fa fa-wrench"></i>
                          Test
                      </a>
                  </li>

                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-cogs"></i>
                          <span>Groups</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="#">User Groups</a></li>
                          <li><a  href="#">Admin</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" >
                          <i class="fa fa-th"></i>
                          <span>Product</span>
                      </a>
                      <ul class="sub">
                          <li><a  href="#">Product Tracking</a></li>
                          <li><a  href="#">Product Groups</a></li>
                          <li><a  href="#">Product List</a></li>
                      </ul>
                  </li>

                  <li>
                      <a routerLink="login">
                          <i class="fa fa-user"></i>
                          <span>Login Page</span>
                      </a>
                  </li>
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
      <!--main content start-->
        <!-- <app-home></app-home> -->
        <section id="main-content">
        <router-outlet></router-outlet>
        </section>
      <!--main content end-->
      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              2017 &copy; Eool LETK.
              <a href="#" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
  </section>
